<template>
	<div class="box">
		<div class="title">账号信息</div>
		<div class="info-item">
			<div>用户昵称</div>
			<div>{{ getNickName }}</div>
		</div>
		<div class="info-item">
			<div>ftp主机地址</div>
			<div>{{ ftpIP }}</div>
		</div>
		<div class="info-item">
			<div>ftp账号</div>
			<div>{{ getUserName }}</div>
		</div>
		<div class="info-item">
			<div>ftp密码</div>
			<div>同此系统密码</div>
		</div>
		<el-button class="close-btn elBtn" @click="closePopup">关闭</el-button>
	</div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store";
// const ftpIP = BASE_CONFIG.FTP_IP;
const userStore = useUserStore();
const getNickName = computed(() => userStore.nickName);
const getUserName = computed(() => userStore.userName);
const ftpIP = computed(() => userStore.ftpInfo);
const router = useRouter();
const closePopup = () => {
	router.push("/main/ai-processing");
};
</script>

<style lang="scss" scoped>
.box {
	@apply absolute left-0 right-0 z-20 m-auto;
	padding: 0 9px;
	top: 34vh;
	width: 305px;
	background: #071d2b;
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1608);
	border-radius: 4px;
	border: 1px solid #76c6ff;
	&::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 7px;
		background: linear-gradient(
			180deg,
			rgba(42, 122, 207, 0.6391) 0%,
			rgba(1, 12, 18, 0.5698) 100%
		);
		border-radius: 6px;
	}
}
.title {
	@apply mt-6 text-center;
	font-size: 15px;
	line-height: 14px;
}
.info-item {
	@apply flex justify-between py-2;
	padding: 0 6px;
	font-size: 14px;
	height: 51px;
	line-height: 51px;
	border-bottom: 1px solid #5680a9;
	> div:first-child {
		color: #b0c4d9;
	}
}
.close-btn {
	@apply relative left-0 right-0 m-auto;
	width: 289px;
	margin-top: 28px;
	margin-bottom: 20px;
}
</style>
